<template>
  <div class="menuNav flex-align">
    <div
      class="nav"
      @click="navTo('Home')"
      :class="{ active: $route.name == 'Home' }"
    >
      <i class="iconfont icon-shouye"></i>
      <span>首页</span>
    </div>
    <div
      class="nav"
      @click="navTo('About')"
      :class="{ active: $route.name == 'About' }"
    >
      <i class="iconfont icon-wode"></i>
      <span>我的</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {
    console.log(this.$route.name, "==name========");
  },
  methods: {
    navTo(routeName) {
      this.$router.push({ name: routeName });
    },
  },
};
</script>
<style lang="less" scoped>
.menuNav {
  height: 63px;
  background: #fff;
  .nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .iconfont {
      font-size: 20px;
    }
    span {
      font-size: 11px;
      color: #a5a5a5;
    }
  }
  .active {
    .iconfont,
    span {
      color: #fd7895;
    }
  }
}
</style>
